<template>
  <div
    class="login"
    v-loading="loading"
    element-loading-text="登录中，请稍候..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @keyup.enter="goLogin"
  >
    <article>
      <header>
        <img
          src="./../assets/images/Login/index_left.png"
          style="width: 454px"
        />
      </header>
      <section>
        <div>
          <p>登录到</p>
          <p>外包人员管理系统</p>
        </div>
        <div class="login-input">
          <img src="./../assets/images/Login/account_icon.svg" alt="" />
          <input
            type="text"
            placeholder="请输入账号"
            v-model="loginForm.username"
          />
        </div>
        <div class="login-input">
          <img src="./../assets/images/Login/password_icon.svg" alt="" />
          <input
            type="password"
            placeholder="请输入密码"
            maxlength="20"
            v-model="loginForm.userpwd"
          />
        </div>
        <!-- <div class="login-input code-input">
          <input type="text" maxlength="5" v-model="loginForm.viaCode" />
          <div class="check-code" @click="getCheckCode"><img :src="viaCode" alt=""></div>
        </div> -->
        <el-checkbox v-model="remember">记住账号</el-checkbox>
        <div @click="goLogin" class="login-btn">登录</div>
      </section>
    </article>

    <section class="copyright">
      <p>Copyright @ 2021-2022 bilibili. All Rights Reserved</p>
    </section>
    <section class="logo">
      <img src="./../assets/images/Login/bilibili_logo.svg" alt="" />
    </section>
  </div>
</template>
<script>
import LocalStore from "store";
import axios from "axios";
import Crypto from "../utils/crypto";
import { encrypt } from '@/utils/encrypt.js'
import { Base64 } from '@/utils/base64'
function fetchGoLogin(store, opts) {
  return store.dispatch("GET_LOGIN", opts);
}

export default {
  data() {
    return {
      loading: false,
      loginForm: {
        username: "",
        userpwd: "",
        code: "origin03",
        nameCode: "",
      },
      remember: false,
      base: ""
    };
  },
  created() {
    let userName = localStorage.getItem("user_name");
    let userpwd = Crypto.decrypt(localStorage.getItem("user_pwd"));
    if (userName) {
      this.loginForm.username = userName;
      this.loginForm.userpwd = userpwd;
    }
  },
  methods: {
    goLogin() {
      if (!this.loading) {
        axios.defaults.headers["Access-Token"] = "";
        if (!this.loginForm.username) {
          this.$message.error("请输入用户名！");
          return;
        }
        if (!this.loginForm.userpwd) {
          this.$message.error("请输入密码！");
          return;
        }

        // 记住账号
        if (this.remember) {
          localStorage.setItem("user_name", this.loginForm.username);
          localStorage.setItem("user_pwd", Crypto.encrypt(this.loginForm.userpwd));
        }

        this.loading = true;
        if (!this.base) this.base = new Base64()
        const { userpwd } = this.loginForm
        const str1 = this.base.encode(userpwd)
        const str2 = encrypt(str1)
        console.log(str1)
        const params = {
          ...this.loginForm,
          userpwd: str2
        }
        fetchGoLogin(this.$store, params).then(() => {
          let tempObj = this.$store.getters.getLoginData;
          if (tempObj.state === "0000") {
            let t = new Date().getTime(),
              tempData = tempObj.data,
              isPranet = false;
            axios.defaults.headers["Access-Token"] = tempData.ticket;
            this.$store.state.userName = tempData.surName;
            this.$store.state.roleName = tempData.roleName;
            isPranet = tempData.origintypeCode === "origin03" ? 1 : 0;
            LocalStore.set("isp", isPranet);
            LocalStore.set("userName", tempData.surName);
            LocalStore.set("roleName", tempData.roleName);
            LocalStore.set("token", tempData.ticket);
            LocalStore.set("t", t);
            this.loading = false;
            this.$router.push("/");
          } else {
            this.loading = false;
          }

          // else if (tempObj.state === '1002' || tempObj.state === '1003') {
          //   // 验证码错误/失效
          //   this.loading = false
          //   // this.getCheckCode()
          //   this._showMessage('error', tempObj.message)
          // } else {
          //   this.loading = false
          //   this._showMessage('error', tempObj.message)
          // }
        });
      }
    },
    // 获取图形码
    // getCheckCode() {
    //   let opts = {
    //     stamp: new Date().getTime()
    //   }
    //   this.loginForm.nameCode = opts.stamp
    //   this.viaCode = CHECKCODE_URL + '?stamp=' + opts.stamp

    // },
    // _showMessage(type, msg) {
    //   this.$message({
    //     duration: 1000,
    //     message: msg,
    //     type: type,
    //   });
    // },
  },
};
</script>
<style lang="scss">
@import "~@/assets/scss/bilibili-theme.scss";
body.html {
  width: 100%;
  height: 100%;
}

.login {
  background: url(../assets/images/Login/login_background.png);
  width: 100%;
  height: 100%;
  background-size: cover;
  overflow: hidden;
  position: fixed;
  .logo {
    width: 132px;
    position: fixed;
    top: 28px;
    left: 28px;
  }
  .copyright {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 400;
    font-size: 14px;
  }
}

.login article {
  width: 1044px;
  height: 554px;
  padding: 50px;
  box-sizing: border-box;
  display: flex;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -522px;
  margin-top: -277px;
  z-index: 20;
  background: #fff;
  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05),
    0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  section {
    width: 410px;
    text-align: left;
    > div:first-child {
      padding-bottom: 57px;
      p {
        font-family: "PingFang SC";
        font-weight: 700;
        font-size: 36px;
        color: #212121;
        text-align: left;
      }
    }
  }
}

.login article header {
  text-align: center;
  padding-right: 50px;
}

.login-input {
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
  > img {
    position: absolute;
    left: 10px;
    top: 12.5px;
  }
}

.login-input input {
  float: left;
  width: 100%;
  height: 40px;
  border-radius: 5px;
  background: #fff;
  outline: none;
  text-indent: 10px;
  color: #000;
  font-size: 14px;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  box-sizing: border-box;
  padding-left: 20px;
}

.login-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  border-radius: 3px;
  background: $--color-primary;
  color: rgba(255, 255, 255, 0.9);
  font-family: "PingFang SC";
  margin-top: 40px;
  text-align: center;
  cursor: pointer;
}

.login-btn div {
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  width: 66px;
  height: 66px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.login section h5 {
  color: #fdac28;
  font-size: 12px;
  font-weight: normal;
  text-shadow: 0 1px 1px #000000;
  cursor: pointer;
  position: absolute;
  left: 56px;
  bottom: 0px;
}

.login section h5:hover {
  color: #ef8700;
}

.code-input {
  position: relative;
  input {
    width: 180px;
  }
  .check-code {
    position: absolute;
    top: 2px;
    right: 16px;
    height: 35px;
    width: 120px;
    cursor: pointer;
    img {
      height: 35px;
      width: auto;
    }
  }
}
</style>
